<ion-header>

  <ion-navbar>
    <ion-title>ShowWhen</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="show-when-demo">

  <h5 margin>Show Icon Per Platform</h5>
  <p margin>In this example we're using the <code>showWhen</code> directive to decide whether to show an icon based on the platform.</p>

  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
      </ion-col>
      <ion-col>
        <code> &lt;ion-icon name="logo-apple" showWhen="ios"&gt;&lt;/ion-icon&gt; </code>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <ion-icon name="logo-android" showWhen="android"></ion-icon>
      </ion-col>
      <ion-col>
        <code> &lt;ion-icon name="logo-android" showWhen="android"&gt;&lt;/ion-icon&gt; </code>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <ion-icon name="logo-windows" showWhen="windows"></ion-icon>
      </ion-col>
      <ion-col>
        <code> &lt;ion-icon name="logo-windows" showWhen="windows"&gt;&lt;/ion-icon&gt; </code>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

<style>
  .show-when-demo ion-col {
    background: #f8f8f8;
    border: 1px solid #ddd;
    margin: 1%;
    max-width: 48%;
    flex: 0 0 48%;
    min-height: 120px;
  }

  .show-when-demo code {
    background: #f8f8f8;
  }

  .show-when-demo ion-icon {
    font-size: 100px;
  }
</style>
